<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Relativity</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="250"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // General settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // --- 1. Draw Reflector S' ---
    const reflectorX = 100;
    const reflectorTopY = 50;
    const reflectorBottomY = 200;

    // Main vertical line for the reflector
    ctx.beginPath();
    ctx.lineWidth = 3;
    ctx.moveTo(reflectorX, reflectorTopY);
    ctx.lineTo(reflectorX, reflectorBottomY);
    ctx.stroke();

    // Hatches on the reflector
    ctx.beginPath();
    ctx.lineWidth = 1.5;
    for (let y = reflectorTopY + 5; y < reflectorBottomY; y += 15) {
        ctx.moveTo(reflectorX, y);
        ctx.lineTo(reflectorX - 10, y + 10);
    }
    ctx.stroke();
    
    // Label S'
    ctx.font = "italic 28px 'Times New Roman'";
    ctx.textAlign = 'center';
    ctx.fillText("S'", reflectorX, reflectorTopY - 15);
    
    // Reset line width for subsequent drawings
    ctx.lineWidth = 2;

    // --- 2. Draw Velocity Vector ν ---
    const vArrowY = 125;
    const vArrowStartX = 140;
    const vArrowEndX = 240;

    ctx.beginPath();
    // Shaft of the arrow
    ctx.moveTo(vArrowStartX, vArrowY);
    ctx.lineTo(vArrowEndX, vArrowY);
    // Arrowhead
    ctx.moveTo(vArrowEndX, vArrowY);
    ctx.lineTo(vArrowEndX - 15, vArrowY - 7);
    ctx.moveTo(vArrowEndX, vArrowY);
    ctx.lineTo(vArrowEndX - 15, vArrowY + 7);
    ctx.stroke();
    
    // Label ν (nu)
    ctx.font = "italic 28px 'Times New Roman'";
    ctx.fillText("ν", (vArrowStartX + vArrowEndX) / 2, vArrowY - 10);
    
    // --- 3. Draw Light Source S ---
    const sourceX = 440;
    const sourceY = 163;
    
    // The dot representing the source
    ctx.beginPath();
    ctx.arc(sourceX, sourceY, 4, 0, 2 * Math.PI);
    ctx.fill();
    
    // Label S
    ctx.font = "italic 28px 'Times New Roman'";
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText("S", sourceX + 8, sourceY);

    // --- 4. Draw Light Beam ---
    const beamCenterY = 163;
    const beamStartX = 410;
    const beamEndX = 280;
    const lineSpacing = 8;
    
    ctx.beginPath();
    // Three parallel lines for the beam
    ctx.moveTo(beamStartX, beamCenterY - lineSpacing);
    ctx.lineTo(beamEndX, beamCenterY - lineSpacing);
    
    ctx.moveTo(beamStartX, beamCenterY);
    ctx.lineTo(beamEndX, beamCenterY);

    ctx.moveTo(beamStartX, beamCenterY + lineSpacing);
    ctx.lineTo(beamEndX, beamCenterY + lineSpacing);
    
    // Arrowhead on the central line, pointing left
    ctx.moveTo(beamEndX, beamCenterY);
    ctx.lineTo(beamEndX + 15, beamCenterY - 7);
    ctx.moveTo(beamEndX, beamCenterY);
    ctx.lineTo(beamEndX + 15, beamCenterY + 7);
    ctx.stroke();
    
    // Label "光束" (Light Beam)
    ctx.font = "28px 'KaiTi', 'SimSun', sans-serif"; // Use common Chinese fonts
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText("光束", (beamStartX + beamEndX) / 2, beamCenterY - lineSpacing * 2);

</script>
</body>
</html>